extends ../_layout

block active
  - sidebar_active = 'dashboard_v3.html'

block content
  .content-heading
    // START Language list
    .pull-right
      .btn-group
        button.btn.btn-default(type='button', data-toggle="dropdown") English
        ul.dropdown-menu.dropdown-menu-right.animated.fadeInUpShort(role='menu')
          li
            a(href='#', data-set-lang="en") English
          li
            a(href='#', data-set-lang="es") Spanish
    // END Language list    

    | Dashboard
    small(data-localize="dashboard.WELCOME") 


  // START widgets box
  .row
    .col-lg-3.col-sm-6
      // START widget
      .panel.bg-info-light.pt.b0.widget
        .ph
          em.icon-cloud-upload.fa-lg.pull-right
          .h2.mt0 1700
          .text-uppercase Uploads
        div(data-sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="#23b7e5", data-chart-range-min="0", data-fill-color="#23b7e5", data-spot-color="#23b7e5", data-min-spot-color="#23b7e5", data-max-spot-color="#23b7e5", data-highlight-spot-color="#23b7e5", data-highlight-line-color="#23b7e5", values="2,5,3,7,4,5", style="margin-bottom: -2px", data-resize="true")
    .col-lg-3.col-sm-6
      // START widget
      .panel.widget.bg-purple-light.pt.b0.widget
        .ph
          em.icon-globe.fa-lg.pull-right
          .h2.mt0 700
            span.text-sm.text-white GB
          .text-uppercase Quota
        div(data-sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="#7266ba", data-chart-range-min="0", data-fill-color="#7266ba", data-spot-color="#7266ba", data-min-spot-color="#7266ba", data-max-spot-color="#7266ba", data-highlight-spot-color="#7266ba", data-highlight-line-color="#7266ba", values="1,4,5,4,8,7,10", style="margin-bottom: -2px", data-resize="true")
    .col-lg-3.col-md-6.col-sm-12
      // START widget
      .panel.widget.bg-info-light.pt.b0.widget
        .ph
          em.icon-bubbles.fa-lg.pull-right
          .h2.mt0 500
          .text-uppercase Reviews
        div(data-sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="#23b7e5", data-chart-range-min="0", data-fill-color="#23b7e5", data-spot-color="#23b7e5", data-min-spot-color="#23b7e5", data-max-spot-color="#23b7e5", data-highlight-spot-color="#23b7e5", data-highlight-line-color="#23b7e5", values="4,5,3,10,7,15", style="margin-bottom: -2px", data-resize="true")
    .col-lg-3.col-md-6.col-sm-12
      // START widget
      .panel.widget.bg-purple-light.pt.b0.widget
        .ph
          em.icon-pencil.fa-lg.pull-right
          .h2.mt0 35
          .text-uppercase Annotations
        div(data-sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="#7266ba", data-chart-range-min="0", data-fill-color="#7266ba", data-spot-color="#7266ba", data-min-spot-color="#7266ba", data-max-spot-color="#7266ba", data-highlight-spot-color="#7266ba", data-highlight-line-color="#7266ba", values="1,3,4,5,7,8", style="margin-bottom: -2px", data-resize="true")

  // END widgets box

  // START chart
  .row
    .col-lg-12
      // START widget
      #panelChart9.panel.panel-default(ng-controller="FlotChartController")
        .panel-heading
          .panel-title Website Performance
        .panel-wrapper(collapse="panelChart9")
          .panel-body
            .chart-splinev3.flot-chart
      // END widget
  // END chart

  .row
    .col-lg-6
      // START panel tab
      .panel.panel-transparent(role='tabpanel')
        // Nav tabs
        ul.nav.nav-tabs.nav-justified(role='tablist')
          li.active(role='presentation')
            a.bb0(href='#home', aria-controls='home', role='tab', data-toggle='tab')
              em.fa.fa-clock-o.fa-fw
              | Tasks Panel
          li(role='presentation')
            a.bb0(href='#profile', aria-controls='profile', role='tab', data-toggle='tab')
              em.fa.fa-money.fa-fw
              | Transactions Panel
        // Tab panes
        .tab-content.p0.bg-white
          #home.tab-pane.active(role='tabpanel') 
            // START list group
            .list-group.mb0
              a.list-group-item.bt0(href='#')
                span.label.label-purple.pull-right just now
                em.fa.fa-fw.fa-calendar.mr
                | Calendar updated
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 4 minutes ago
                em.fa.fa-fw.fa-comment.mr
                | Commented on a post
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 23 minutes ago
                em.fa.fa-fw.fa-truck.mr
                | Order 392 shipped
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 46 minutes ago
                em.fa.fa-fw.fa-money.mr
                | Invoice 653 has been paid
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 1 hour ago
                em.fa.fa-fw.fa-user.mr
                | A new user has been added
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 2 hours ago
                em.fa.fa-fw.fa-check.mr
                | Completed task: "pick up dry cleaning"
              a.list-group-item(href='#')
                span.label.label-purple.pull-right yesterday
                em.fa.fa-fw.fa-globe.mr
                | Saved the world
              a.list-group-item(href='#')
                span.label.label-purple.pull-right two days ago
                em.fa.fa-fw.fa-check.mr
                | Completed task: "fix error on sales page"
              a.list-group-item(href='#')
                span.label.label-purple.pull-right two days ago
                em.fa.fa-fw.fa-check.mr
                | Completed task: "fix error on sales page"
            // END list group
            .panel-footer.text-right
              a.btn.btn-default.btn-sm(href='#') View All Activity 
          #profile.tab-pane(role='tabpanel')
            // START table responsive
            .table-responsive
              table.table.table-bordered.table-hover.table-striped
                thead
                  tr
                    th Order #
                    th Order Date
                    th Order Time
                    th Amount (USD)
                tbody
                  tr
                    td 3326
                    td 10/21/2013
                    td 3:29 PM
                    td $321.33
                  tr
                    td 3325
                    td 10/21/2013
                    td 3:20 PM
                    td $234.34
                  tr
                    td 3324
                    td 10/21/2013
                    td 3:03 PM
                    td $724.17
                  tr
                    td 3323
                    td 10/21/2013
                    td 3:00 PM
                    td $23.71
                  tr
                    td 3322
                    td 10/21/2013
                    td 2:49 PM
                    td $8345.23
                  tr
                    td 3321
                    td 10/21/2013
                    td 2:23 PM
                    td $245.12
                  tr
                    td 3320
                    td 10/21/2013
                    td 2:15 PM
                    td $5663.54
                  tr
                    td 3319
                    td 10/21/2013
                    td 2:13 PM
                    td $943.45
            // END table responsive
            .panel-footer.text-right
              a.btn.btn-default.btn-sm(href='#') View All Transactions
      // END panel tab
    .col-lg-6(ng-controller="VectorMapController")
      .panel.panel-transparent
        div(data-vector-map="", data-height='450', data-scale=0, data-map-name="world_mill_en")

  // START Widgets
  .row
    .col-lg-3
      
      // START loader widget
      .panel.panel-default
        .panel-body
          a.text-muted.pull-right(href="#"): em.fa.fa-arrow-right
          .text-info Average Monthly Uploads
          canvas.center-block(data-classyloader="", data-percentage="70", data-speed="20", data-font-size="40px", data-diameter="70", data-line-color="#23b7e5", data-remaining-line-color="rgba(200,200,200,0.4)", data-line-width="10", data-rounded-line="true")
          .text-center(data-sparkline="", data-bar-color="#23b7e5", data-height="30", data-bar-width="5", data-bar-spacing="2", values="5,4,8,7,8,5,4,6,5,5,9,4,6,3,4,7,5,4,7")
        .panel-footer
          p.text-muted
            em.fa.fa-upload.fa-fw
            span This Month
            span.text-dark 1000 Gb
      // END loader widget
    .col-lg-3
      // START messages and activity
      .panel.panel-default
        .panel-heading
          .panel-title Latest activities
        // START list group
        .list-group
          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-purple
                  em.fa.fa-cloud-upload.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 15m
                .media-box-heading
                  a(href="#").text-purple.m0 NEW FILE
                p.m0: small
                  a(href="#") Bootstrap.xls
          // END list group item

          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-info
                  em.fa.fa-file-text-o.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 2h
                .media-box-heading
                  a(href="#").text-info.m0 NEW DOCUMENT
                p.m0: small
                  a(href="#") Bootstrap.doc
          // END list group item

          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-danger
                  em.fa.fa-exclamation.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 5h
                .media-box-heading
                  a(href="#").text-danger.m0 BROADCAST
                p.m0
                  a(href="#") Read
          // END list group item

          // START list group item
          .list-group-item
            .media-box
              .pull-left
                span.fa-stack
                  em.fa.fa-circle.fa-stack-2x.text-success
                  em.fa.fa-clock-o.fa-stack-1x.fa-inverse.text-white
              .media-box-body.clearfix
                small.text-muted.pull-right.ml 15h
                .media-box-heading
                  a(href="#").text-success.m0 NEW MEETING
                p.m0
                  small On 
                    em 10/12/2015 09:00 am
          // END list group item
        // END list group
        // START panel footer
        .panel-footer.clearfix
          a(href='#').pull-left
            small Load more
        // END panel-footer
      // END messages and activity
    .col-lg-6
      .panel.panel-default
        .panel-heading
          .pull-right.label.label-danger 5
          .pull-right.label.label-success 12
          .panel-title Team messages
        
        // START list group
        .list-group(data-height="230", data-scrollable="")
          // START list group item
          a.list-group-item(href='#')
            .media-box
              .pull-left
                img.media-box-object.img-circle.thumb32(src="img/user/02.jpg", alt="Image")
              .media-box-body.clearfix
                small.pull-right 2h
                strong.media-box-heading.text-primary 
                  span.circle.circle-success.circle-lg.text-left
                  | Catherine Ellis
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media-box
              .pull-left
                img.media-box-object.img-circle.thumb32(src="img/user/03.jpg", alt="Image")
              .media-box-body.clearfix
                small.pull-right 3h
                strong.media-box-heading.text-primary 
                  span.circle.circle-success.circle-lg.text-left
                  | Jessica Silva
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla facilisi.
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media-box
              .pull-left
                img.media-box-object.img-circle.thumb32(src="img/user/09.jpg", alt="Image")
              .media-box-body.clearfix
                small.pull-right 4h
                strong.media-box-heading.text-primary 
                  span.circle.circle-danger.circle-lg.text-left
                  | Jessie Wells
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media-box
              .pull-left
                img.media-box-object.img-circle.thumb32(src="img/user/12.jpg", alt="Image")
              .media-box-body.clearfix
                small.pull-right 1d
                strong.media-box-heading.text-primary 
                  span.circle.circle-danger.circle-lg.text-left
                  | Rosa Burke
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media-box
              .pull-left
                img.media-box-object.img-circle.thumb32(src="img/user/10.jpg", alt="Image")
              .media-box-body.clearfix
                small.pull-right 2d
                strong.media-box-heading.text-primary 
                  span.circle.circle-danger.circle-lg.text-left
                  | Michelle Lane
                p.mb-sm: small Mauris eleifend, libero nec cursus lacinia...
          // END list group item
        // END list group
        // START panel footer
        .panel-footer.clearfix
          .input-group
            input.form-control.input-sm(type='text', placeholder='Search message ..')
            span.input-group-btn
              button.btn.btn-default.btn-sm(type='submit')
                i.fa.fa-search
        // END panel-footer

    // END dashboard sidebar
  // END Widgets

block vendor_css
  // WEATHER ICONS
  link(rel='stylesheet', href='../vendor/weather-icons/css/weather-icons.min.css')

block vendor_js
  // SPARKLINE
  script(src='../vendor/sparkline/index.js')
  // FLOT CHART
  script(src='../vendor/Flot/jquery.flot.js')
  script(src='../vendor/flot.tooltip/js/jquery.flot.tooltip.min.js')
  script(src='../vendor/Flot/jquery.flot.resize.js')
  script(src='../vendor/Flot/jquery.flot.pie.js')
  script(src='../vendor/Flot/jquery.flot.time.js')
  script(src='../vendor/Flot/jquery.flot.categories.js')
  script(src='../vendor/flot-spline/js/jquery.flot.spline.min.js')
  // CLASSY LOADER
  script(src='../vendor/jquery-classyloader/js/jquery.classyloader.min.js')
  // MOMENT JS
  script(src='../vendor/moment/min/moment-with-locales.min.js')
  // SKYCONS
  script(src='../vendor/skycons/skycons.js')
  // DEMO
  script(src='js/demo/demo-flot.js')
  // VECTOR MAP
  script(src='../vendor/ika.jvectormap/jquery-jvectormap-1.2.2.min.js')
  script(src='../vendor/ika.jvectormap/jquery-jvectormap-world-mill-en.js')
  script(src='../vendor/ika.jvectormap/jquery-jvectormap-us-mill-en.js')
  script(src='js/demo/demo-vector-map.js')
